// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import React from 'react';
import { IContextualMenuItemProps } from '@fluentui/react/lib/ContextualMenu';
import { IStackStyles, Stack } from '@fluentui/react/lib/Stack';
import { Text } from '@fluentui/react/lib/Text';
import { NeutralColors } from '@fluentui/theme';

import { PropertyItem, PropertyTreeItem } from './PropertyTreeItem';
import { DEFAULT_TREE_ITEM_HEIGHT } from './constants';

const labelContainerStyle: IStackStyles = {
  root: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    height: DEFAULT_TREE_ITEM_HEIGHT,
  },
};

export const getPickerContextualMenuItem =
  (query: string, propertyTreeExpanded: Record<string, boolean>) => (itemProps: IContextualMenuItemProps) => {
    const {
      item: { secondaryText: path },
    } = itemProps;

    const { onToggleExpand, level, node } = itemProps.item.data as {
      node: PropertyItem;
      onToggleExpand: (itemId: string, expanded: boolean) => void;
      level: number;
    };

    const renderLabel = () => {
      const pathNodes = (path ?? '').split('.');
      return (
        <Stack horizontal styles={labelContainerStyle} verticalAlign="center">
          {pathNodes.map((pathNode, idx) => (
            <Text
              key={`segment-${idx}`}
              styles={{
                root: {
                  color: idx === pathNodes.length - 1 ? NeutralColors.black : NeutralColors.gray130,
                },
              }}
              variant="small"
            >
              {`${pathNode}${idx === pathNodes.length - 1 && node.children.length === 0 ? '' : '.'}`}
            </Text>
          ))}
        </Stack>
      );
    };

    const renderSearchResultLabel = () => (
      <Stack styles={labelContainerStyle} verticalAlign="center">
        <Text variant="small">{path}</Text>
      </Stack>
    );

    return (
      <PropertyTreeItem
        expanded={propertyTreeExpanded[node.id]}
        item={node}
        level={level}
        onRenderLabel={query ? renderSearchResultLabel : renderLabel}
        onToggleExpand={onToggleExpand}
      />
    );
  };
